<template>
    <div id="write" v-title :data-title="title">
        <el-container>
            <base-header :simple=true>
                <el-col :span="4" :offset="2">
                    <div class="me-write-info">写文章</div>
                </el-col>
                <el-col :span="4" :offset="6">
                    <div class="me-write-btn">
                        <el-button round @click="publishShow">发布</el-button>
                        <el-button round @click="cancel">取消</el-button>
                    </div>
                </el-col>
            </base-header>

            <el-container class="me-area me-write-box">
                <el-main class="me-write-main">
                    <div class="me-write-title">
                        <el-input resize="none" type="textarea" autosize v-model="articleForm.title" placeholder="请输入标题"
                            class="me-write-input">
                        </el-input>

                    </div>
                    <div id="placeholder" style="visibility: hidden;height: 89px;display: none;"></div>
                    <!-- markdown编辑器 -->
                    <markdown-editor :codeStyle="codeStyle" :editor="articleForm.editor" class="me-write-editor">
                    </markdown-editor>
                </el-main>
            </el-container>

            <el-dialog title="摘要 分类 标签" :visible.sync="publishVisible" :close-on-click-modal=false
                custom-class="me-dialog">

                <el-form :model="articleForm" ref="articleForm" :rules="rules">
                    <el-form-item prop="summary">
                        <el-input type="textarea" v-model="articleForm.summary" :rows="6" placeholder="请输入摘要">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="文章分类" prop="category">
                        <el-select v-model="articleForm.category" value-key="id" placeholder="请选择文章分类">
                            <el-option v-for="c in categorys" :key="c.id" :label="c.categoryName" :value="c">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="文章标签" prop="tags">
                        <el-checkbox-group v-model="articleForm.tags">
                            <el-checkbox v-for="t in tags" :key="t.id" :label="t.id" name="tags">{{t.tagName}}
                            </el-checkbox>
                        </el-checkbox-group>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="publishVisible = false">取 消</el-button>
                    <el-button type="primary" @click="publish('articleForm')">发布</el-button>
                </div>
            </el-dialog>
        </el-container>
    </div>
</template>

<script>
    import BaseHeader from '@/views/BaseHeader'
    import MarkdownEditor from '@/components/markdown/MarkdownEditor'
    import { publishArticle, getArticleById } from '@/api/article'
    import { getAllCategorys } from '@/api/category'
    import { getAllTags } from '@/api/tag'

    export default {
        name: 'BlogWrite',
        mounted() {

            if (this.$route.params.id) {
                this.getArticleById(this.$route.params.id)
            }

            this.getCategorysAndTags()
            this.editorToolBarToFixedWrapper = this.$_.throttle(this.editorToolBarToFixed, 200)

            window.addEventListener('scroll', this.editorToolBarToFixedWrapper, false);
        },
        beforeDestroy() {
            window.removeEventListener('scroll', this.editorToolBarToFixedWrapper, false)
        },
        data() {
            return {
                publishVisible: false,
                categorys: [],
                tags: [],
                articleForm: {
                    id: '',
                    title: '',
                    summary: '',
                    category: '',
                    tags: [],
                    editor: {
                        value: '',
                        ref: '',//保存mavonEditor实例  实际不该这样
                        default_open: 'edit',
                        // Markdown工具栏配置
                        toolbars: {
                            bold: true, // 粗体
                            italic: true, // 斜体
                            header: true, // 标题
                            underline: true, // 下划线
                            strikethrough: true, // 中划线
                            mark: true, // 标记
                            superscript: true, // 上角标
                            subscript: true, // 下角标
                            quote: true, // 引用
                            ol: true, // 有序列表
                            ul: true, // 无序列表
                            link: true, // 链接
                            imagelink: true, // 图片链接
                            code: true, // code
                            fullscreen: true, // 全屏编辑
                            readmodel: true, // 沉浸式阅读
                            help: true, // 帮助
                            undo: true, // 上一步
                            redo: true, // 下一步
                            trash: true, // 清空
                            alignleft: false, // 左对齐
                            aligncenter: false, // 居中
                            alignright: false, // 右对齐
                            navigation: true, // 导航目录
                            //subfield: true, // 单双栏模式
                            preview: true, // 预览
                        },
                    },
                },
                // markdown编辑器代码样式 monokai-sublime
                codeStyle: "atom-one-light",//主题

                // 表单验证
                rules: {
                    summary: [
                        { required: true, message: '请输入摘要', trigger: 'blur' },
                        { max: 80, message: '不能大于80个字符', trigger: 'blur' }
                    ],
                    category: [
                        { required: true, message: '请选择文章分类', trigger: 'change' }
                    ],
                    tags: [
                        { type: 'array', required: true, message: '请选择标签', trigger: 'change' }
                    ]
                }
            }
        },
        computed: {
            title() {
                return '写文章'
            }
        },
        methods: {
            getArticleById(id) {
                let that = this
                getArticleById(id).then(data => {

                    Object.assign(that.articleForm, data.data)
                    that.articleForm.editor.value = data.data.body.content

                    let tags = this.articleForm.tags.map(function (item) {
                        return item.id;
                    })

                    this.articleForm.tags = tags


                }).catch(error => {
                    if (error !== 'error') {
                        that.$message({ type: 'error', message: '文章加载失败', showClose: true })
                    }
                })
            },
            publishShow() {
                if (!this.articleForm.title) {
                    this.$message({ message: '标题不能为空哦', type: 'warning', showClose: true })
                    return
                }

                if (this.articleForm.title.length > 30) {
                    this.$message({ message: '标题不能大于30个字符', type: 'warning', showClose: true })
                    return
                }

                if (!this.articleForm.editor.ref.d_render) {
                    this.$message({ message: '内容不能为空哦', type: 'warning', showClose: true })
                    return
                }

                this.publishVisible = true;
            },
            publish(articleForm) {

                let that = this

                this.$refs[articleForm].validate((valid) => {
                    if (valid) {

                        let tags = this.articleForm.tags.map(function (item) {
                            return { id: item };
                        });

                        let article = {
                            id: this.articleForm.id,
                            title: this.articleForm.title,
                            summary: this.articleForm.summary,
                            category: this.articleForm.category,
                            tags: tags,
                            body: {
                                content: this.articleForm.editor.value,
                                contentHtml: this.articleForm.editor.ref.d_render
                            }

                        }

                        this.publishVisible = false;

                        let loading = this.$loading({
                            lock: true,
                            text: '发布中，请稍后...'
                        })

                        publishArticle(article, this.$store.state.token).then((data) => {
                            if (data.success) {
                                loading.close();
                                that.$message({ message: '发布成功啦', type: 'success', showClose: true })
                                that.$router.push({ path: `/view/${data.data.id}` })
                            } else {
                                that.$message({ message: error, type: '发布文章失败:' + data.msg, showClose: true });
                            }

                        }).catch((error) => {
                            loading.close();
                            if (error !== 'error') {
                                that.$message({ message: error, type: 'error', showClose: true });
                            }
                        })

                    } else {
                        return false;
                    }
                });
            },
            cancel() {
                this.$confirm('文章将不会保存, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push('/')
                })
            },
            getCategorysAndTags() {
                let that = this
                getAllCategorys().then(data => {
                    if (data.success) {
                        that.categorys = data.data
                    } else {
                        that.$message({ type: 'error', message: '文章分类加载失败', showClose: true })
                    }

                }).catch(error => {
                    if (error !== 'error') {
                        that.$message({ type: 'error', message: '文章分类加载失败', showClose: true })
                    }
                })

                getAllTags().then(data => {
                    if (data.success) {
                        that.tags = data.data
                    } else {
                        that.$message({ type: 'error', message: '标签加载失败', showClose: true })
                    }
                }).catch(error => {
                    if (error !== 'error') {
                        that.$message({ type: 'error', message: '标签加载失败', showClose: true })
                    }
                })

            },
            editorToolBarToFixed() {

                let toolbar = document.querySelector('.v-note-op');
                let curHeight = document.documentElement.scrollTop || document.body.scrollTop;
                if (curHeight >= 160) {
                    document.getElementById("placeholder").style.display = "block"; //bad  用计算属性较好
                    toolbar.classList.add("me-write-toolbar-fixed");
                } else {
                    document.getElementById("placeholder").style.display = "none";
                    toolbar.classList.remove("me-write-toolbar-fixed");
                }
            }
        },
        components: {
            'base-header': BaseHeader,
            'markdown-editor': MarkdownEditor
        },
        //组件内的守卫 调整body的背景色
        beforeRouteEnter(to, from, next) {
            window.document.body.style.backgroundColor = '#fff';
            next();
        },
        beforeRouteLeave(to, from, next) {
            window.document.body.style.backgroundColor = '#f5f5f5';
            next();
        }
    }
</script>

<style>
    .el-header {
        position: fixed;
        z-index: 1024;
        min-width: 100%;
        box-shadow: 0 2px 3px hsla(0, 0%, 7%, .1), 0 0 0 1px hsla(0, 0%, 7%, .1);
    }

    .me-write-info {
        line-height: 60px;
        font-size: 18px;
        font-weight: 600;
    }

    .me-write-btn {
        margin-top: 10px;
    }

    .me-write-box {
        max-width: 1366px;
        margin: 80px auto 0 auto;
    }

    .me-write-main {
        padding: 0;
    }

    .me-write-title {}

    .me-write-input textarea {
        font-size: 32px;
        font-weight: 600;
        height: 20px;
        /* border: none; */
        border-bottom-style: solid;
        border-bottom-color: darkorange;
        border-top: none;
        border-left: none;
        border-right: none;
    }

    .me-write-editor {
        min-height: 650px !important;
    }

    .me-header-left {
        margin-top: 10px;
    }

    .me-title img {
        max-height: 2.4rem;
        max-width: 100%;
    }

    .me-write-toolbar-fixed {
        position: fixed;
        width: 700px !important;
        top: 60px;
    }

    .v-note-op {
        box-shadow: none !important;
    }

    .auto-textarea-input,
    .auto-textarea-block {
        font-size: 18px !important;
    }
</style>